<template>

	<div align="center">
		<div style="width: 60%;">
			<el-row>
				<el-col :span="4">
					<div style="height: 500px;text-align: left;border: 1px solid rgb(0, 0, 0,0.1);">
						<div align="center">
							<ul>
								<a href="javascript:;" @click="switchDisplay(1)">
									<li :class="switchf===1 ? 'selected' : 'noSelected'"><span>我的订单</span></li>
								</a>
								<a href="javascript:;" @click="switchDisplay(2)">
									<li :class="switchf===2 ? 'selected' : 'noSelected'"><span>修改密码</span></li>
								</a>
								<a href="javascript:;" @click="switchDisplay(0)">
									<li :class="switchf===0 ? 'selected' : 'noSelected'"><span>常用信息/登录记录</span></li>
								</a>
							</ul>
						</div>
					</div>
				</el-col>
				<el-col :span="20">
					<PersonalInformation v-if="switchf===0"></PersonalInformation>
					<Order v-if="switchf===1"></Order>
					<ChangePassword v-if="switchf===2"></ChangePassword>
				</el-col>
			</el-row>
		</div>
	</div>

</template>

<script>
	import Order from "./Order"
	import PersonalInformation from "./PersonalInformation"
	import ChangePassword from "./ChangePassword"

	export default {
		created() {
			var switchf=sessionStorage.getItem("switch");
			if(switchf===null || switchf===undefined){
				this.switchf=0;
			}else{
				this.switchf=parseInt(switchf);
			}
		},
		data() {
			return {
				switchf: 0
			}
		},
		components: {
			Order,
			PersonalInformation,
			ChangePassword
		},
		methods: {
			switchDisplay(index) {
				if (this.switchf === index) return;
				sessionStorage.setItem("switch",index);
				this.switchf = index;
			}
		}
	}
</script>

<style>
	ul {
		width: 100%;
		list-style-type: none;
		text-align: center;
	}

	.noSelected {
		height: 60px;
		line-height: 60px;
	}
	
	.selected{
		height: 60px;
		line-height: 60px;
		margin-left: -3px;
		border-left: 3px solid #00aaff;
		color: #00aaff;
		background-color: rgb(0, 170, 255,0.1);
	}

	a {
		font-weight: 900;
		font-size: 15px;
		text-decoration: none;
		color: rgb(0, 0, 0, 0.5);
	}

	.noSelected:hover {
		background-color: rgb(206, 206, 206, 0.3);
		transition: 0.2s;
	}
</style>